<template>
  <div>
    <div class="share-page">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/role-permission' }"
          >角色权限模版</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="monitoring-content">
      <div class="title">
        角色权限模板
        <el-button
          class="mx-10"
          round
          color="#0071bb"
          :icon="Plus"
          @click="addRole"
          >添加权限模板</el-button
        >
      </div>
      <div class="box">
        <div class="item" v-for="(item, index) in cardList" :key="index">
          <div class="item-top">
            <div class="top-left">
              <img
                v-if="item.name == '补货员'"
                src="/src/assets/system/补货员.png"
                alt=""
                srcset=""
              />
              <img
                v-if="item.name == '维修员'"
                src="/src/assets/system/维修员.png"
                alt=""
                srcset=""
              />
              <img
                v-if="item.name == '点位推荐员'"
                src="/src/assets/system/点位推荐员.png"
                alt=""
                srcset=""
              />
              <img
                v-if="item.name == '超级管理员'"
                src="/src/assets/system/超级管理员.png"
                alt=""
                srcset=""
              />

              <div>{{ item.name }}</div>
            </div>
            <div class="text">系统默认</div>
          </div>
          <div class="item-info">
            <div class="info-text">{{ item.content }}</div>
          </div>
          <div class="item-btn">
            <el-button size="small" round color="#0071bb">查看</el-button>
          </div>
        </div>
        <div
          class="item-people item"
          v-for="(item, index) in peopleList"
          :key="index"
        >
          <div class="item-top">
            <div class="top-left">
              <img
                v-if="item.name == '员工'"
                src="/src/assets/system/员工.png"
                alt=""
                srcset=""
              />
              <div>{{ item.name }}</div>
            </div>
            <div class="info-text">系统默认</div>
          </div>
          <div class="item-info">
            <div class="info-text">{{ item.content }}</div>
          </div>
          <div class="item-btn">
            <el-button size="small" round color="#0071bb">查看/修改</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import {
  Refresh,
  Search,
  RefreshLeft,
  HelpFilled,
  Plus,
} from "@element-plus/icons-vue";
const cardList = [
  {
    id: "1",
    name: "补货员",
    content: "负责设备的日常补货和商品管理",
  },
  {
    id: "1",
    name: "维修员",
    content: "负责设备的维修",
  },
  {
    id: "1",
    name: "点位推荐员",
    content: `此角色仅有移动端共享数据的权限，
              可以查看指定设备的交易和分成，适用于点位分成的合作伙伴。`,
  },
  {
    id: "1",
    name: "超级管理员",
    content: "负责运营商设备管理及相关运营的助手",
  },
];
const peopleList = [
  {
    id: "1",
    name: "员工",
    content: `此角色仅有移动端共享数据的权限`,
  },
];

const router = useRouter();
const addRole = () => {
  router.push("/add-role-permission");
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  justify-content: start;
  align-items: center;

  .item {
    width: 24%;
    height: 160px;
    padding: 10px;
    background-color: #00ffff !important;
    border-radius: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;

    .item-top {
      font-size: 14px;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .top-left {
        display: flex;
        align-items: center;
        img {
          width: 20px;
          height: 18px;
        }
      }

      .top-right {
        display: flex;
        margin-right: 30px;

        .right-text {
          color: #2282c2;
          margin-right: 10px;
          cursor: pointer;
        }
      }
    }

    .item-info {
      font-size: 12px;
      color: #999;
    }
    .text {
      font-size: 12px;
      color: #999;
      font-weight: normal;
    }
    .info-text {
      margin-left: 18px;
      font-size: 12px;
      color: #999;
      font-weight: normal;
      margin-top: 10px;
    }

    .item-btn {
      width: 100px;
      position: absolute;
      bottom: 10px;
      right: 10px;
      button {
        width: 100px;
      }
    }
  }
  .item-people {
    background-color: rgb(255, 243, 236) !important;
  }
}
.el-button--primary {
  background: rgb(0, 113, 187);
}
.el-button--warning {
  background: rgb(246, 146, 30);
}
.el-button--danger {
  background: rgb(255, 0, 0);
}
.title {
  color: #4d4d4d;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
}
.monitoring-content {
  background: #fff;
  padding: 10px 10px 0px 10px;
  height: 86vh !important;
}

.search {
  display: flex;
  justify-content: space-between;
  // margin-bottom: 10px;
  padding: 0 10px;
}
.search-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .btn {
    align-self: right;
  }
}
.mx-10 {
  margin: 0px 10px;
}
.flex-s {
  display: flex;
  align-content: center;
  justify-content: start;
}
.page_number {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

.tables {
  margin-top: 10px;
}
.type2 {
  color: #71abd8;
}
</style>
